.headerBox {
  // display: flex;
  // flex-direction: row;
  // align-items: top;
  // justify-content: space-between;
}
.info {
  display: flex;
  align-items: center;
  // justify-content: center;
  .avatar {
    margin-right: 10px;
  }
}
.right {
	text-align: right;
	.date {
		margin: 4px 0;
		.dateText {
			color: white;
		}
	}

	.weather {
		transform: matrix(1, 0, 0, 1, 0, 0);
		opacity: 1;
		.text {
			color: white;
			font-size: 20px;
		}
	}
}
.weatherSunnyCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  .left {
    font-size: 60px;
    line-height: 60px;
    .c {
      margin-left: 5px;
      font-size: 18px;
      line-height: 30px;
      vertical-align: top;
    }
  }
}
.cloudSunny {
  position: absolute;
  top: 40%;
  left: 45%;
  z-index: 10;
  animation: cloudSunny 10s ease-in-out infinite;
}
@keyframes cloudSunny {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
.sunny {
  position: absolute;
  top: 80%;
  left: 35%;
  z-index: 9999;
  animation: weatherAnimation linear 10s infinite;
}
@keyframes weatherAnimation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translate(70px) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translate(70px) rotate(360deg);
  }
}

.quackAppList {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.cloud {
  position: absolute;
  top: -30%;
  // left: 55%;
	right: 15%;
  z-index: 6;
  animation: cloud 10s ease-in-out infinite;
}
@keyframes cloud {
  0% {
    transform: translateY(0);
  }
	50%{
		transform: translateY(40px);
	}
  100% {
    transform: translateY(0);
  }
}
